<template>
  <div class="default">
    <!-- 默认搜索 -->
    <section class="hotlist" v-if="hotList">
      <h3 class="title">热门搜索</h3>
      <ul class="list" v-if="hotList.length>0">
        <li class="item" v-for="(item,index) in hotList" :key="index" @click="$emit('changekeyword',item.first)">{{item.first}}</li>
      </ul>
      <music-loading v-else></music-loading>
    </section>
    <!-- 历史搜索 -->
    <section class="history">
      <ul class="list">
        <li class="item" v-for="(hty,index) in wordHistory" :key="index" @click="$emit('changekeyword',hty)">
          <i class="history-icon"></i>
          <div class="histyr">
            <span class="link thide" >{{hty}}</span>
            <figure class="close">
                <i class="close-icon" @click.stop="del(index)"></i>
            </figure>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>
<script>
import MusicLoading from "@/components/MusicLoading.vue"
export default {
  props:{
    keywords:String,
    wordHistory:Array,
  },
  data(){
    return{
      hotList:[]
    }
  },
  created(){
    this.getHotList()
  },
  methods:{
    async getHotList(){
      let res=await this.axios.get("/search/hot")
      this.hotList=res.result.hots
    },
    del(index){
      this.wordHistory.splice(index,1)
      this.$emit('delhot',this.wordHistory)
    }
  },
  components:{
    MusicLoading,
  }
}
</script>
<style lang="less" scoped>
.hotlist{
    padding: 15px 10px 0px;
    color: #333;
    .list{
        margin: 10px 0px 7px;
        position: relative;
        .item{
            border: 1px solid #d3d4da;
            border-radius: 32px;
            display: inline-block;
            line-height: 32px;
            height: 32px;
            padding: 0px 14px;
            margin-right: 8px;
            margin-bottom: 8px;
        }
    }
}
.history{
    .list{
        .item{
            display: flex;
            height: 45px;
            align-items: center;
            .history-icon{
                background: url("../assets/history.svg") no-repeat;
                width: 15px;
                height: 15px;
                display: inline-block;
                margin: 0px 10px;
            }
            .histyr{
                position: relative;
                display: flex;
                flex: 1;
                width: 1%;
                align-items: center;
                height: 45px;
                .link{
                    margin-right: 10px;
                    flex: 1;
                    width: 1%;
                }
                .thide{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: normal;
                }
                .close{
                    width: 32px;
                    height: 32px;
                    line-height: 32px;
                    .close-icon{
                        display: inline-block;
                        background: url("../assets/history-close.svg") no-repeat;
                        width: 12px;
                        height: 12px;
                    }
                }
                &::after {
                    position: absolute;
                    content: "";
                    border: 0 solid rgba(0, 0, 0, 0.1);
                    bottom: 0;
                    left: 0;
                    box-sizing: border-box;
                    width: 100%;
                    border-bottom-width: 1px;
                }
            }
        }
    }
}
</style>